<!--
 * @Author: MarsLay
 * @Date: 2021-12-23 09:39:56
 * @LastEditTime: 2024-01-31 10:09:22
 * @LastEditors: MarsLay 331412466@qq.com
 * @Description: 列表类底部按钮组件，支持带列表跳转形式，单提交按钮，确定/拒绝等操作功能
 * 类型
 * select 全选
 * list 列表跳转
 * multiple 同意/拒绝
 * single 提交
 * connect 拼接按钮
 * @FilePath: \smart-sports-manage\components\button\button.vue
-->
<template>
  <view class="button" :class="param.type" :style="{ position: param.position }">
    <view class="button-inner" :style="{ 'width': param.width }">
      <image v-if="param.type == 'list'" @click="$util.debounce($util.linkTo(`${param.path}`))" class="list-icon"
        mode="aspectFit" src="../../static/img/icon/list-icon-2.png"></image>
      <view v-if="param.multiple && param.type == 'select'" class="select-handler" :class="{ 'active': cParam.selectAll }"
        @click="select">
        <checkbox :value="JSON.stringify(cParam.selectAll)" :checked="cParam.selectAll" />全选
      </view>
      <view @click="handler(v.value)" class="single-handler" :class="{ 'list-handler': param.type == 'list' }"
        :style="{ 'background': v.bgcolor, 'color': v.color, 'border': v.border, 'borderRadius': v.bdradius }"
        v-for="(v, i) in param.list" :key="i">
        <view class="handler-inner"
          :style="{ 'background': v.bgcolorInner, 'borderRadius': v.bdradiusInner, 'fontSize': param.fontSize }">{{
            v.title }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "bButton",
  components: {},
  props: {
    param: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      current: this.handlerObj,
      cParam: this.param
    };
  },
  computed: {},
  watch: {},
  onLoad(d) { },
  onShow() { },
  methods: {
    handler(v) {
      this.$emit("handler", v);
    },
    select() {
      this.param.selectAll = !this.param.selectAll;
      this.$emit("select", this.param.selectAll);
    },
    isAll(bool) {
      this.cParam.selectAll = bool;
    }
  },
};
</script>
<style lang='less' scoped>
.button {
  position: initial;
  .flex(row, space-between);
  z-index: 9;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 35upx constant(safe-area-inset-bottom) !important;
  padding: 0 35upx env(safe-area-inset-bottom) !important;
  height: calc(constant(safe-area-inset-bottom) + 50px);
  height: calc(env(safe-area-inset-bottom) + 50px);
  background-color: #ffffff;
  box-shadow: 0px -2upx 0px 0px #F5F5F5;
}

.button-inner {
  .flex();
  width: 100%;
  height: 100%;

  .single-handler {
    .flex(row, center);
    width: 100%;
    height: 80%;
    border-radius: 50upx;
    font-size: 36upx;

    &.list-handler {
      width: 600upx;
    }
  }

  .handler-inner {
    .flex(row, center);
    width: 100%;
    height: 100%;
    line-height: 0;
    font-size: 36upx;
    letter-spacing: 18upx;
    text-indent: 18upx;
  }
}

.connect.button {
  .flex(row, center);
}

.multiple {
  .single-handler {
    width: 48%;
  }
}

.select {
  .single-handler {
    width: 80%;
  }
}

.button.single {
  .button-inner {
    .flex(row, center);
  }
}

.connect {
  .single-handler {
    width: 50%;
  }
}

.list-icon {
  width: 56upx;
  height: 56upx;
}

.select-handler {
  color: #888990;
}

.select-handler.active {
  color: #1ca9ff;
}

/deep/ .uni-checkbox-input {
  margin-top: -6upx;
}

.list {
  top: initial !important;
}
</style>